<template>
  <div class="audition127">
    <h3><strong>显式转换：</strong></h3>
    <p>1. xxx.toString()，String(xxx)，转换成字符串</p>
    <p>需要注意的是: </p>
    <p>数字转换为字符串时，不能直接<span class="color">111.toString()</span>，这样写不仅不能转换，编辑器还会直接报书写错误。</p>
    <p>object对象转换为字符串时，得到的是<span class="color">[object Object]</span>，所以对象转换成字符串时，应该使用<span class="color">Json.stringify(obj)</span>方法</p>
    <p>null和undefined没有toSting()方法</p>
    <p>各种数据类型转化成字符串: </p>
    <v-md-preview :text="text1" />
    <p>2. Number(xxx)转换为数值型</p>
    <p>parseInt(xxx)转换为整数， parseFolat(xxx)转换为浮点数</p>
    <p>各种类型转换为数值型：</p>
    <v-md-preview :text="text2" />
    <p>-------------------------------</p>
    <p>3. Boolean(xxx)转换为布尔型</p>
    <p>各种类型转换为布尔型：</p>
    <v-md-preview :text="text3" />
    <hr>
    <h3><strong>隐式转换之+-</strong></h3>
    <p>1. 和string类型做+运算</p>
    <v-md-preview :text="text4" />
    <p>2. 和number类型做+运算</p>
    <v-md-preview :text="text5" />
    <p>3. 做-运算时，都先转换成数值类型，再做计算</p>
    <hr>
    <h3><strong>不同类型做比较时：</strong></h3>
    <p>1. function , array , object和boolean做比较时，前者先转换为string，再转换为number，boolean直接转换为number，两个number之间做比较</p>
    <code class="code">
      [] == true // false<br />
      []先转换为''，再转换为0； true先转换为1，然后0 == 1为false
    </code>
    <p>2. function, array, object和string做比较时，前者先转换为string，再和后者做比较</p>
    <code class="code">
      // <span class="color">*注意</span>，arr在写的时候有空格，这是书写格式。转换为string时是没有格式中的空格的<br />
      [1, 2, 'hello'] == '1,2,hello' // true
    </code>
    <p>3. function, array, object和number做比较时，前者先转换为string，再转换为number，然后和后者做比较</p>
    <p>4. string和number做比较时，前者先转换为number，再和后者做比较</p>
    <p>5. string和boolean做比较时，两者都先转换为number，然后做比较</p>
    <p>6. boolean和number做比较时，前者先转换为number，然后和后者做比较</p>
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition127',
  data() {
    return {
      text1: `${prefix}
      var num = 1
      console.log(num.toString()) // '1'
      var bool = true
      console.log(bool.toString()) // 'true'
      var fn = function() {}
      console.log(fn.toString()) // 'function() {}'
      var arr = [1, 2, 3, 'hello']
      console.log(arr.toString()) // 1,2,3,hello
      var obj = {a: 1}
      console.log(obj.toString()) // [object Object]
      console.log(JSON.stringify(obj)) // '{"a":1}'
      var nul = null
      console.log(nul.toString()) // 报错
      var und = undefined
      console.log(und.toString()) // 报错
      \n${suffix}`,
      text2: `${prefix}
      var str1 = 'hello'
      var str2 = '111hello'
      var str3 = 'hello111'
      var str4 = 'he2333llo'
      console.log(Number(str1), Number(str2), Number(str3), Number(str4)) // NaN NaN NaN NaN
      console.log(parseInt(str1), parseInt(str2), parseInt(str3), parseInt(str4)) // NaN 111 NaN NaN
      console.log(parseFloat(str1), parseFloat(str2), parseFloat(str3), parseFloat(str4)) // NaN 111 NaN NaN
      var bool1 = true
      var bool2 = false
      console.log(Number(bool1), Number(bool2)) // 1 0
      console.log(parseInt(bool1), parseInt(bool2)) // NaN NaN
      var nul = null
      console.log(Number(nul)) // 0
      var und = undefined
      console.log(Number(und)) // NaN
      var fn = function() {}
      console.log(Number(fn)) // NaN
      var arr = [1, 2, 3, 'hello']
      console.log(Number(arr)) // NaN
      var obj = {a: 1}
      console.log(Number(obj)) // NaN
      \n${suffix}`,
      text3: `${prefix}
      var num1 = 0
      var num2 = 1
      console.log(Boolean(num1), Boolean(num2)) // false true
      var str1 = ''
      var str2 = 'hello'
      console.log(Boolean(str1), Boolean(str2)) // false true
      var nul = null
      console.log(Boolean(nul)) // false
      var und = undefined
      console.log(Boolean(und)) // false
      var fn = function() {}
      console.log(Boolean(fn)) // true
      var arr1 = []
      var arr2 = [1]
      console.log(Boolean(arr1), Boolean(arr2)) // true true
      var obj1 = {}
      var obj2 = {a: 1}
      console.log(Boolean(obj1), Boolean(obj2)) // true true
      \n${suffix}`,
      text4: `${prefix}
      var str = 'hello'
      var num = 1
      console.log(str + num) // hello1
      var bool = true
      console.log(str + bool) // hellotrue
      var nul = null
      console.log(str + nul) // hellonull
      var und = undefined
      console.log(str + und) // helloundefined
      var fn = function() {}
      console.log(str + fn) // hellofunction() {}
      var arr = [1, 2, 'haha']
      console.log(str + arr) // hello1,2,haha
      var obj = {a: 1}
      console.log(str + obj) // hello[object Object]
      \n${suffix}`,
      text5: `${prefix}
      var num = 233
      var bool1 = true
      var bool2 = false
      console.log(num + bool1,  num + bool2) // 234 233
      var nul = null
      console.log(num + nul) // 233
      var und = undefined
      console.log(num + und) // NaN
      var fn = function() {}
      console.log(num + fn) // 233function() {}
      var arr = [1, 2, 'haha']
      console.log(num + arr) // 2331,2,haha
      var obj = {a: 1}
      console.log(num + obj) // 233[object Object]
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>